<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <div class="upload-contanier">
          <el-form :model="bannerList[0]" label-width="auto">
            <el-form-item label="banner1 名称：" prop="name">
              <el-input v-model="bannerList[0].name" placeholder="请输入 Banner 名称" />
            </el-form-item>
            <el-form-item label="banner1 图片（PC）：" prop="image"  v-show="false">
              <k-upload-file
                ref="upload1"
                v-model="bannerList[0].url"
                upload-style="img"
                @successUpload="successUpload($event,0,1)"
              />
              <span style="color: #b2b2b2;cursor: pointer;" @click="onclickview(bannerList[0].url)">只能上传jpg/png文件，且不超过2M</span>
            </el-form-item>
            <el-form-item label="banner1 跳转链接（PC）：" prop="linkurl"  v-show="false">
              <el-input v-model="bannerList[0].redirectUrl" placeholder="请输入跳转链接：" />
            </el-form-item>
            <el-form-item label="banner1 图片（手机）：" prop="image">
              <k-upload-file
                ref="upload1"
                v-model="bannerList[0].mobileUrl"
                upload-style="img"
                @successUpload="successUpload($event,0,2)"
              />
              <span style="color: #b2b2b2;cursor: pointer;" @click="onclickview(bannerList[0].mobileUrl)">只能上传jpg/png文件，且不超过2M</span>
            </el-form-item>
            <el-form-item label="banner1 跳转链接（手机）：" prop="linkurl">
              <el-input v-model="bannerList[0].mobileRedirectUrl" placeholder="请输入跳转链接：" />
            </el-form-item>
            <el-form-item label="显示状态：" prop="status">
              <el-switch
                v-model="bannerList[0].status"
                active-color="#3b425d"
                inactive-color="#E9EBF2"
                :active-value="1"
                :inactive-value="0"
                @change="updatebannerStatus($event,1)"
              />
            </el-form-item>
          </el-form>

        </div></el-col>
      <el-col :span="12">
        <div class="upload-contanier">
          <el-form :model="bannerList[1]" label-width="auto">
            <el-form-item label="banner2 名称：" prop="name">
              <el-input v-model="bannerList[1].name" placeholder="请输入 Banner 名称" />
            </el-form-item>
            <el-form-item label="banner2 图片（PC）：" prop="image"  v-show="false">
              <k-upload-file
                ref="upload1"
                v-model="bannerList[1].url"
                upload-style="img"
                @successUpload="successUpload($event,1,1)"
              />
              <span style="color: #b2b2b2;cursor: pointer;" @click="onclickview(bannerList[1].url)">只能上传jpg/png文件，且不超过2M</span>
            </el-form-item>
            <el-form-item label="banner2 跳转链接（PC）：" prop="linkurl"  v-show="false">
              <el-input v-model="bannerList[1].redirectUrl" placeholder="请输入跳转链接：" />
            </el-form-item>
            <el-form-item label="banner2 图片（手机）：" prop="image">
              <k-upload-file
                ref="upload1"
                v-model="bannerList[1].mobileUrl"
                upload-style="img"
                @successUpload="successUpload($event,1,2)"
              />
              <span style="color: #b2b2b2;cursor: pointer;" @click="onclickview(bannerList[1].mobileUrl)">只能上传jpg/png文件，且不超过2M</span>
            </el-form-item>
            <el-form-item label="banner2 跳转链接（手机）：" prop="linkurl">
              <el-input v-model="bannerList[1].mobileRedirectUrl" placeholder="请输入跳转链接：" />
            </el-form-item>
            <el-form-item label="显示状态：" prop="status">
              <el-switch
                v-model="bannerList[1].status"
                :active-value="1"
                :inactive-value="0"
                active-color="#3b425d"
                inactive-color="#E9EBF2"
                @change="updatebannerStatus($event,2)"
              />
            </el-form-item>
          </el-form>

        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><div class="upload-contanier">
        <el-form :model="bannerList[2]" label-width="auto">
          <el-form-item label="banner3 名称：" prop="name">
            <el-input v-model="bannerList[2].name" placeholder="请输入 Banner 名称" />
          </el-form-item>
          <el-form-item label="banner3 图片（PC）：" prop="image"  v-show="false">
            <k-upload-file
              ref="upload1"
              v-model="bannerList[2].url"
              upload-style="img"
              @successUpload="successUpload($event,2,1)"
            />
            <span style="color: #b2b2b2;cursor: pointer;" @click="onclickview(bannerList[2].url)">只能上传jpg/png文件，且不超过2M</span>
          </el-form-item>
          <el-form-item label="banner3 跳转链接（PC）：" prop="linkurl"  v-show="false">
            <el-input v-model="bannerList[2].redirectUrl" placeholder="请输入跳转链接：" />
          </el-form-item>
          <el-form-item label="banner3 图片（手机）：" prop="image">
            <k-upload-file
              ref="upload1"
              v-model="bannerList[2].mobileUrl"
              upload-style="img"
              @successUpload="successUpload($event,2,2)"
            />
            <span style="color: #b2b2b2;cursor: pointer;" @click="onclickview(bannerList[2].mobileUrl)">只能上传jpg/png文件，且不超过2M</span>
          </el-form-item>
          <el-form-item label="banner3 跳转链接（手机）：" prop="linkurl">
            <el-input v-model="bannerList[2].mobileRedirectUrl" placeholder="请输入跳转链接：" />
          </el-form-item>
          <el-form-item label="显示状态：" prop="status">
            <el-switch
              v-model="bannerList[2].status"
              :active-value="1"
              :inactive-value="0"
              active-color="#3b425d"
              inactive-color="#E9EBF2"
              @change="updatebannerStatus($event,3)"
            />
          </el-form-item>
        </el-form>

      </div></el-col>
      <el-col :span="12"><div class="grid red3" />
        <div class="upload-contanier">
          <el-form :model="bannerList[3]" label-width="auto">
            <el-form-item label="banner4 名称：" prop="name">

              <el-input v-model="bannerList[3].name" placeholder="请输入 Banner 名称" />
            </el-form-item>
            <el-form-item label="banner4 图片（PC）：" prop="image"  v-show="false">
              <k-upload-file
                ref="upload1"
                v-model="bannerList[3].url"
                upload-style="img"
                @successUpload="successUpload($event,3,1)"
              />
              <span style="color: #b2b2b2;cursor: pointer;" @click="onclickview(bannerList[3].url)">只能上传jpg/png文件，且不超过2M</span>
            </el-form-item>
            <el-form-item label="banner4 跳转链接（PC）：" prop="linkurl"  v-show="false">
              <el-input v-model="bannerList[3].redirectUrl" placeholder="请输入跳转链接：" />
            </el-form-item>
            <el-form-item label="banner4 图片（手机）：" prop="image">
              <k-upload-file
                ref="upload1"
                v-model="bannerList[3].mobileUrl"
                upload-style="img"
                @successUpload="successUpload($event,3,2)"
              />
              <span style="color: #b2b2b2;cursor: pointer;" @click="onclickview(bannerList[3].mobileUrl)">只能上传jpg/png文件，且不超过2M</span>
            </el-form-item>
            <el-form-item label="banner4 跳转链接（手机）：" prop="linkurl">
              <el-input v-model="bannerList[3].mobileRedirectUrl" placeholder="请输入跳转链接：" />
            </el-form-item>
            <el-form-item label="显示状态：" prop="status">
              <el-switch
                v-model="bannerList[3].status"
                :active-value="1"
                :inactive-value="0"
                active-color="#3b425d"
                inactive-color="#E9EBF2"
                @change="updatebannerStatus($event,4)"
              />
            </el-form-item>
          </el-form>

        </div>
      </el-col>
    </el-row>
    <div class="footer">
      <button class="btnStyle" @click="saveBanner">保存</button>
    </div>
    <el-image
      ref="previewImg"
      style="width: 0px; height: 0px"
      :preview-src-list="previewSrcList"
    />
  </div>
</template>

<script>
import { bannerListData, saveBanner } from '@/api/message/message'

export default {
  components: {},
  data() {
    return {
      bannerList: [
        { id: undefined, name: '', url: '', mobileUrl: '', redirectUrl: '', mobileRedirectUrl: '', status: 0, sort: 1 },
        { id: undefined, name: '', url: '', mobileUrl: '', redirectUrl: '', mobileRedirectUrl: '', status: 0, sort: 2 },
        { id: undefined, name: '', url: '', mobileUrl: '', redirectUrl: '', mobileRedirectUrl: '', status: 0, sort: 3 },
        { id: undefined, name: '', url: '', mobileUrl: '', redirectUrl: '', mobileRedirectUrl: '', status: 0, sort: 4 }
      ],
      previewSrcList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.bannerListData()
  },
  mounted() {
    console.log('123', this.$refs.previewImg.previewSrcList)
  },
  methods: {
    onclickview(img) {
      this.previewSrcList = [img]
      this.$refs.previewImg.showViewer = true
    },
    bannerListData() {
      bannerListData().then(res => {
        const originList = res.data.data
        if (originList.length === 0) return
        this.bannerList = res.data.data
        this.bannerList.forEach((item)=>{
             console.log();
             item.mobileUrl =item.mobileUrl
             item.url = item.url
        })
      })
    },
    saveBanner(e) {
      const target = e.target
      saveBanner(this.bannerList).then(res => {
        if (res.data.success) {
          this.$message.success('保存成功')
          this.bannerListData()
        } else {
          this.$message.success(res.data.msg)
        }
      })
      target.blur()
    },
    // 单独开关无效 整体保存有效
    updatebannerStatus(value, index) {
      // updatebannerStatus({ 'bannerId': 1, 'status': 0 }).then(res => {
      //   this.$log(res)
      //   if (res.data.success) {
      //     this.$message.success('更新成功')
      //   } else {
      //     this.$message.success(res.data.msg)
      //   }
      // })
    },
    successUpload(data, index, flag) {
      if (flag === 1) {
        this.bannerList[index].url = data
      } else {
        this.bannerList[index].mobileUrl = data
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$mainColor:#3b425d;// 主色调

.upload-contanier {
  margin: 20px;
  height: 750px;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .el-form-item {
    margin-bottom: 12px;
  }
  ::v-deep .el-input__inner:focus {
    border-color: $mainColor;
  }
}
.submitBtn1 {
    display: inline-block;
    cursor: pointer;
  }
.btnStyle{
  width: 148px;
  height: 44px;
  background: #e7ecf8;
  border: 1px solid $mainColor;
  border-radius: 8px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: $mainColor;
  &:hover{
    background: $mainColor;
    color: #fff;
  }
}
.footer {
  text-align: center;
  margin-top: 20px;
}

 ::v-deep .avatar-uploader{
 &-icon {
      font-size: 28px;
      color: #8c939d;
      width: 280px;
      height: 150px;
      line-height: 150px;
      text-align: center;
    }
   .avatar {
      width: 280px;
      height: 150px;
      display: block;
    }
 }
</style>
